<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta charset="UTF-8">
    <title>优购优品网</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant_new.css">
    <link rel="stylesheet" type="text/css" href="../../css/vue-virtual-scroller.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../css/local.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vue-virtual-scroller.min.js"></script>
    <script type="text/javascript" src="../../script/vant_new.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>

    <style>
        .head {
            background-color: #efefef;
            color: #3e3c3c;
        }

        .van-nav-bar__left {
            width: 80px;
            text-align: left;
            padding-left: 14px;
            left: 0;
        }

        .van-nav-bar__text {
            color: #323233;
        }

        .van-nav-bar .van-icon {
            color: #323233;
        }

        .van-sidebar-item {
            padding: 13px 12px 13px 9px;
        }

        .van-sidebar-item--select {
            color: #ee0a24;
        }

        .left {
            width: 80px;
            height: 100%;
            overflow-y: auto;
            background: #f8f8f8;
        }

        .right {
            position: absolute;
            left: 80px;
            right: 0;
            top: 0;
            height: 100%;
            overflow-y: auto;
            padding-right: 5px;
            background: #fff;
        }

        .right>div,
        .right>div>div {
            height: 100%;
            overflow: hidden;
        }

        .right .row {
            position: relative;
        }

        .right .row .chexkbox {
            padding: 10px;
        }

        /* .right .row .img img {
            width: 100%;
            height: 100%;
        } */

        .right .row .desc {
            padding-left: 5px;
            padding-bottom: 5px;
        }

        .right .row .desc::after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            top: -50%;
            right: -50%;
            bottom: -50%;
            left: -50%;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }

        .right .row .desc .title {
            font-size: 14px;
            /* height: 40px; */
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
        }

        .right .row .desc .title .hot {
            color: #fff;
            background: #cd1b21;
            font-size: 12px;
            border-radius: 2px;
            margin-right: 5px;
            display: inline-block;
            line-height: 16px;
            padding: 0 2px;
            vertical-align: middle;
        }

        .tag {
            position: relative;
            overflow: hidden;
        }

        .tag>div {
            transform: scale(0.8);
            -webkit-transform-origin-x: 0;
            overflow: hidden;
            width: 128%;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .tag span {
            color: #cd1b21;
            border: 1px solid #ff6e73;
            font-size: 12px;
            border-radius: 2px;
            display: inline-block;
            line-height: 16px;
            padding: 0 2px;
            vertical-align: middle;
            margin-right: 4px;
            margin-bottom: 4px;
        }

        .right .row .desc .sub-title {
            font-size: 12px;
            color: #969799;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .right .row .desc .sub-title * {
            vertical-align: middle;
        }

        .banner {
            padding: 10px 10px 0 10px;

        }

        .banner>div {
            border-radius: 6px;
            overflow: hidden;
            background: #fdabab;
        }

        .banner img {
            width: 100%;
        }

        .price {
            color: #cd1b21;
            font-size: 18px;
        }

        .gwc {
            position: absolute;
            right: 0;
            bottom: 0;
            padding: 10px;
        }

        .cart {
            position: fixed;
            bottom: 30px;
            left: 20px;
            width: 50px;
            height: 50px;
            border-radius: 30px;
            overflow: hidden;
            background: rgba(0, 0, 0, .6);
            text-align: center;
            line-height: 44px;
        }

        .num {
            position: fixed;
            bottom: 65px;
            left: 65px;
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            color: #fff;
            background: #cd1b21;
            border-radius: 16px;
            text-align: center;
            z-index: 11;
        }

        /* .van-popup {
            width: 70%;
            height: 100%;
        }

        .van-popup .filter-list {
            height: calc(100% - 44px);
            padding: 80px 0 20px 10px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .van-popup .filter-txt {
            line-height: 42px;
        }

        .van-popup .van-row {
            border-bottom: 1px solid #ebedf0;
            padding-bottom: 5px;
        }

        .van-popup .filter-condition {
            height: 26px;
            line-height: 26px;
            width: 80%;
            margin-bottom: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        } */

        .van-search__content {
            border: 1px solid #cd1b21;
        }

        .van-search {
            background: transparent !important;
            padding: 0;
        }

        .van-nav-bar__title {
            margin: 0 130px 0 50px;
            max-width: none;
        }

        .van-nav-bar__left {
            height: 46px;
        }

        .head-right {
            height: 46px;
        }

        .scroller {
            height: 100%;
        }

        .scroller .van-cell {
            padding: 2px 12px;
        }

        .num-edit {
            position: absolute;
            bottom: 10px;
            right: 0;
        }

        .type {
            text-align: center;
            font-size: 12px;
            color: #424242;
        }

        .type img {
            height: 80px;
        }

        .mb {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: 0 15px;
            font-size: 13px;
            color: #9e9e9e;
            height: 40px;
            line-height: 40px;
            background: #fff;
            z-index: 99;
        }

        .mb span {
            color: #cd1b21;
        }

        .p {
            padding: 15px;
            color: #9e9e9e;
        }

        .l .van-cell {
            font-size: 15px;
        }

        .c {
            text-align: right;
        }

        .c .c-p {
            font-size: 16px;
            color: #cd1b21;
        }

        .t {
            font-size: 13px;
            color: #9e9e9e;
            padding: 10px 15px;
        }


        .tab {
            overflow: hidden;
            width: 130px;
            padding-left: 10px;
            height: 47px;
            line-height: 55px;
            border-bottom: 1px solid #ebedf0;
            margin-right: -10px;

        }

        .tab .t-d {
            font-size: 0;
            border-radius: 6px;
            margin-top: -1px;
        }

        .tab .t-d>div {
            display: inline-block;
            width: 55px;
            text-align: center;
            height: 30px;
            font-size: 13px;
            border: 1px solid #cd1b21;
            line-height: 28px;
        }

        .tab .t-d>div.on {
            background: #cd1b21;
            color: #fff;
            line-height: 28px;
        }

        .sq-m {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.5);
        }

        .sq {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .sq img {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px !important;
            height: 30px !important;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">

            <van-nav-bar class="head head-index" left-arrow @click-left="onClickLeft">
                <div slot="title" style="margin-top: 10px;">
                    <form action="" style="margin-top:-3px;">
                        <van-search placeholder="输入编码、品牌、品类、车型搜索" v-if="detailTypeList.length && chooseType == 1"
                            v-model="keyName" shape="round" @search="getSearchList">
                        </van-search>
                        <van-search placeholder="输入编码、品牌、品类、车型搜索" v-if="detailTypeList.length && chooseType == 2"
                            v-model="detailTypeList[activeKey].keyName" shape="round"
                            @search="clickAllTypeHandler(detailTypeList[activeKey])">
                        </van-search>
                    </form>
                </div>
                <div slot="right">
                    <div class="head-right">
                        <div>
                            <div class="tab">
                                <div class="t-d">
                                    <div :class="chooseType == 1?'on':''" @click="toggleType">普通</div>
                                    <div :class="chooseType == 2?'on':''" @click="toggleType">套餐</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-nav-bar>

            <div class="body-no-bottom">
                <div class="content">

                    <div class="left">
                        <van-sidebar v-model="activeKey" v-if="chooseType == 1">
                            <van-sidebar-item :title="row.Name" v-for="(row,index) in detailTypeList"
                                v-show="index != 0" @click="toggleItem1(row)">
                            </van-sidebar-item>
                        </van-sidebar>
                        <van-sidebar v-model="activeKey" @change="toggleItem2" v-if="chooseType == 2">
                            <van-sidebar-item :title="row.TagName" v-for="row in detailTypeList">
                            </van-sidebar-item>
                        </van-sidebar>
                    </div>
                    <div class="right">
                        <div v-if="chooseType == 1">
                            <div v-for="(row,i) in detailTypeList" v-show="i == activeKey">
                                <div class="mb" v-if="row.typeNode.length && row.isFinal">
                                    <span @click="returnBefore(row)">{{row.Name}}&nbsp;</span>/
                                    <span v-if="row.selectTypeIndex == -1">&nbsp;搜索结果</span>
                                    <span
                                        v-if="row.selectTypeIndex != -1">&nbsp;{{row.typeNode[row.selectTypeIndex].Name}}</span>
                                </div>
                                <div class="type" v-if="!row.isFinal">
                                    <van-row>
                                        <van-col :span="8" v-for="(typeItem,typeIndex) in row.typeNode">
                                            <div @click="clickTypeHandler1(row,typeItem,typeIndex)">
                                                <div v-if="typeIndex == 0 && row.typeNode[1]"><img
                                                        :src="shoppingMallServerIP + row.typeNode[1].Icon" /></div>
                                                <div v-if="typeIndex != 0"><img
                                                        :src="shoppingMallServerIP + typeItem.Icon" /></div>
                                                <div>{{typeItem.Name}}</div>
                                            </div>

                                        </van-col>
                                    </van-row>
                                </div>
                                <div v-if="row.isFinal" style="height: 100%;overflow: hidden;"
                                    :style="{'padding-top':row.typeNode.length?'40px':'0'}">
                                    <van-pull-refresh :disabled="row.loadingDisabled" v-model="row.refreshLoading"
                                        @refresh="onRefresh1(row)">
                                        <a-b class="scroller" :items="detailTypeList[activeKey].node"
                                            :min-item-size="59" key-field="ProductId" onscroll="listScroll(this)">
                                            <template v-slot="{ item,index,active }">
                                                <b-c :item="item" :size-dependencies="[item.BrandName,item.ProductName]"
                                                    :data-index="index" :active="active">
                                                    <van-cell>
                                                        <div class="row flex-box">

                                                            <div class="desc flex-main">
                                                                <div class="title">
                                                                    {{item.ProductName}}
                                                                </div>
                                                                <div style="font-size: 14px;color:#9e9e9e;">
                                                                    货号：{{item.ProductCode}}</div>
                                                                <div class="price">
                                                                    <span
                                                                        style="font-size: 12px;">￥</span>{{item.SalePrice}}
                                                                </div>

                                                            </div>
                                                            <div class="chexkbox" @click.stop="toggleChecked(item,row)">
                                                                <van-checkbox v-model="item.checked"
                                                                    checked-color="#cd1b21">
                                                                </van-checkbox>
                                                            </div>
                                                            <div class="num-edit" v-if="item.checked" @click.stop="">
                                                                <van-stepper v-model="item.num" :step="item.StepNum"
                                                                    :min="item.StepNum" :max="item.Stock"
                                                                    :disable-input="item.StepNum > 1?true:false"
                                                                    @change="changeCheckNum(item,row)">
                                                                </van-stepper>
                                                            </div>

                                                            <div class="sq-m" v-if="item.Stock <= 0">
                                                                <div class="sq"><img src="../../image/sq.png" /></div>
                                                            </div>
                                                        </div>
                                                    </van-cell>

                                                </b-c>
                                            </template>
                                        </a-b>

                                    </van-pull-refresh>
                                </div>


                            </div>
                        </div>
                        <div v-if="chooseType == 2">
                            <div v-for="(row,i) in detailTypeList" v-show="i == activeKey">

                                <div class="mb" v-if="row.typeNode.length && row.isFinal">
                                    <span @click="returnBefore(row)">{{row.TagName}}&nbsp;</span>/
                                    <span v-if="row.selectTypeIndex == -1">&nbsp;搜索结果</span>
                                    <span
                                        v-if="row.selectTypeIndex != -1">&nbsp;{{row.typeNode[row.selectTypeIndex].Name}}</span>
                                </div>


                                <div class="type" v-if="!row.isFinal">
                                    <van-row>
                                        <van-col :span="8" v-for="(typeItem,typeIndex) in row.typeNode">
                                            <div @click="clickTypeHandler2(row,typeItem,typeIndex)">
                                                <div v-if="typeIndex == 0 && row.typeNode[1]"><img
                                                        :src="shoppingMallServerIP + row.typeNode[1].Icon" /></div>
                                                <div v-if="typeIndex != 0"><img
                                                        :src="shoppingMallServerIP + typeItem.Icon" /></div>
                                                <div>{{typeItem.Name}}</div>
                                            </div>

                                        </van-col>
                                    </van-row>
                                </div>

                                <div style="overflow: hidden;height:100%;padding-top: 40px;" v-if="row.isFinal">
                                    <van-pull-refresh :disabled="row.loadingDisabled" v-model="row.refreshLoading"
                                        @refresh="onRefresh2(row)">
                                        <a-b class="scroller" :items="detailTypeList[activeKey].node"
                                            :min-item-size="59" key-field="ProductId" onscroll="listScroll(this)">
                                            <template v-slot="{ item,index,active }">
                                                <b-c :item="item" :size-dependencies="[item.BrandName,item.ProductName]"
                                                    :data-index="index" :active="active">
                                                    <van-cell>
                                                        <div class="row flex-box">

                                                            <div class="desc flex-main">
                                                                <div class="title">
                                                                    {{item.ProductName}}
                                                                </div>
                                                                <div style="font-size: 14px;color:#9e9e9e;">
                                                                    货号：{{item.ProductCode}}</div>
                                                                <div class="price">
                                                                    <span
                                                                        style="font-size: 12px;">￥</span>{{item.SalePrice}}
                                                                </div>

                                                            </div>
                                                            <div class="chexkbox" @click.stop="toggleChecked(item,row)">
                                                                <van-checkbox v-model="item.checked"
                                                                    checked-color="#cd1b21">
                                                                </van-checkbox>
                                                            </div>
                                                            <div class="num-edit" v-if="item.checked" @click.stop="">
                                                                <van-stepper v-model="item.num" :step="item.StepNum"
                                                                    :min="item.StepNum" :max="item.Stock"
                                                                    :disable-input="item.StepNum > 1?true:false"
                                                                    @change="changeCheckNum(item,row)">
                                                                </van-stepper>
                                                            </div>

                                                            <div class="sq-m" v-if="item.Stock <= 0">
                                                                <div class="sq"><img src="../../image/sq.png" /></div>
                                                            </div>
                                                        </div>
                                                    </van-cell>

                                                </b-c>
                                            </template>
                                        </a-b>

                                    </van-pull-refresh>
                                </div>

                            </div>
                        </div>



                    </div>

                </div>
                <van-loading v-if="showLoading" />
            </div>
            <div class="bottom">
                <van-submit-bar :price="getTotalPrice()" :loading="ifConfirm" @submit="onSubmit" button-text="确定">
                    <van-checkbox checked-color="#cd1b21" v-model="allChecked" @change="changeAll">全选</van-checkbox>
                </van-submit-bar>
            </div>
        </div>


        <van-popup v-model="showCheckedArray" style="border-radius: 8px;" :style="{width:'80%'}">
            <div class="p">清单汇总</div>
            <div class="l">
                <van-cell-group>

                    <van-cell v-for="(row,index) in detailTypeList" v-if="row.checkArray.length">
                        <div class="row flex-box">

                            <div class="desc flex-main">
                                <div class="title">
                                    <span v-if="chooseType == 1">{{row.Name}}</span>
                                    <span v-if="chooseType == 2">{{row.TagName}}</span>
                                </div>

                            </div>
                            <div class="c">

                                <div>{{row.checkArray.length}}种&nbsp;/&nbsp;{{getCheckedTotalNum(row)}}件</div>
                                <div class="c-p">￥{{getCheckedTotalPrice(row)}}</div>
                            </div>

                        </div>
                    </van-cell>





                </van-cell-group>
            </div>
            <div class="t">合计<span style="font-size: 15px;color: #cd1b21;">￥{{getTotalPrice_popup()}}</span></div>
            <div style="padding: 10px;">
                <van-row gutter="20">
                    <van-col span="24">
                        <van-button type="primary" block @click="addCart">加入购物车</van-button>
                    </van-col>
                </van-row>
            </div>
        </van-popup>


        <van-dialog v-model="showMealNum" close-on-click-overlay @close="closeMeal" @confirm="setMealNum">
            <div style="padding-top:30px;">
                <van-field label="套餐数量" type="number" v-model="mealNum" placeholder="请输入套餐数量"></van-field>
            </div>
        </van-dialog>


    </div>



</body>
<script type="text/javascript">
    var vm;

    function listScroll(that) {
        if ($(that).scrollTop() == 0) {
            vm.detailTypeList[vm.activeKey].loadingDisabled = false;
        } else {
            vm.detailTypeList[vm.activeKey].loadingDisabled = true;
        }
    }

    apiready = function () {
        //$('.init-full').show();


        var h_userId = api.pageParam.h_userId;

        Vue.use(vant.Lazyload, {
            loading: '../../image/no.png',
            error: '../../image/no.png'
        });



        Vue.component('a-b', VueVirtualScroller.DynamicScroller)
        Vue.component('b-c', VueVirtualScroller.DynamicScrollerItem)

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                serverIP: 'http://' + FLD.serverIP,
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                activeKey: 0,
                detailTypeList: [],
                detailTypeList1: [],
                detailTypeList2: [],
                types: [],
                allChecked: false,
                showCheckedArray: false,
                chooseType: 0,
                showMealNum: false,
                mealNum: 1,
                isMeal: false,
                keyName: ''
            },
            created: function () {
                var that = this;

                var appTop = parseInt(window.localStorage.getItem('safeAreaTop'));

                if (appTop) {
                    $('.head-index').css({
                        'padding-top': appTop + 'px',
                        'height': appTop + 50 + 'px',
                        'line-height': '40px'
                    })
                }


                that.getMeal();



            },
            methods: {
                toggleType() {
                    var that = this;


                    var v = 0;
                    for (var i in that.detailTypeList) {
                        if (that.detailTypeList[i].checkArray.length) {
                            v = 1;
                        }
                    }
                    if (v == 0) {
                        that.allChecked = false;

                        if (that.chooseType == 1) {
                            that.activeKey = 0;
                            that.chooseType = 2;
                            that.detailTypeList = JSON.parse(JSON.stringify(that.detailTypeList2));
                        } else if (that.chooseType == 2) {
                            that.activeKey = 1;
                            that.chooseType = 1;
                            that.detailTypeList = JSON.parse(JSON.stringify(that.detailTypeList1));
                        }
                    } else {
                        that.$dialog.confirm({
                            title: '提示',
                            message: '当前存在勾选商品,是否切换?'
                        }).then(() => {
                            that.allChecked = false;

                            if (that.chooseType == 1) {
                                that.activeKey = 0;
                                that.chooseType = 2;
                                that.detailTypeList = JSON.parse(JSON.stringify(that.detailTypeList2));
                            } else if (that.chooseType == 2) {
                                that.activeKey = 1;
                                that.chooseType = 1;
                                that.detailTypeList = JSON.parse(JSON.stringify(that.detailTypeList1));
                            }
                        }).catch(() => {

                        });
                    }

                },
                getCheckedTotalNum(row) {
                    var num = 0;
                    for (var i in row.checkArray) {
                        num += row.checkArray[i].num
                    }
                    return num;
                },
                getCheckedTotalPrice(row) {
                    var price = 0;
                    for (var i in row.checkArray) {
                        price += row.checkArray[i].num * row.checkArray[i].SalePrice;
                    }
                    return price.toFixed(2);
                },
                toggleNodeChecked(row) {
                    var that = this;
                    for (var i in row.node) {
                        for (var j in row.checkArray) {
                            if (row.node[i].ProductId == row.checkArray[j].ProductId) {
                                that.$set(row.node[i], 'checked', true);
                                row.node[i].num = row.checkArray[j].num;
                            }
                        }
                    }

                },
                getTypes() {
                    var that = this;
                    FLD.ajax('sp_allProductType', {}, function (res) {


                        var detailTypeList1 = [];
                        detailTypeList1.push({
                            Name: '全部',
                            CategoryId: 0
                        })
                        for (var i in res.ds) {
                            if (res.ds[i].ParentCategoryId == 0) {
                                for (var j in res.ds) {
                                    if (res.ds[i].CategoryId == res.ds[j].ParentCategoryId) {
                                        detailTypeList1.push(JSON.parse(JSON.stringify(res.ds[j])))
                                    }
                                }
                            }

                        }
                        for (var i in detailTypeList1) {
                            detailTypeList1[i].listLoading = false;
                            detailTypeList1[i].listFinished = true;
                            detailTypeList1[i].loadingDisabled = false;
                            detailTypeList1[i].refreshLoading = false;
                            detailTypeList1[i].pageIndex = 1;
                            detailTypeList1[i].pageSize = 99999;
                            detailTypeList1[i].node = [];
                            detailTypeList1[i].checkArray = [];
                            detailTypeList1[i].keyName = '';
                            detailTypeList1[i].brandId = 0;
                            detailTypeList1[i].tagId = 0;
                            detailTypeList1[i].isFinal = false;
                            detailTypeList1[i].selectTypeIndex = -1;
                            var node = [{
                                CategoryId: detailTypeList1[i].CategoryId,
                                Name: '全部',
                                Icon: ''
                            }];
                            for (var j in res.ds) {
                                if (detailTypeList1[i].CategoryId == res.ds[j].ParentCategoryId) {
                                    var n = JSON.parse(JSON.stringify(res.ds[j]));
                                    n.num = 1;
                                    node.push(n);
                                }
                            }
                            if (node.length == 1) node = [];
                            detailTypeList1[i].typeNode = node;
                        }
                        that.detailTypeList1 = detailTypeList1;

                        //先显示普通

                        // that.detailTypeList = JSON.parse(JSON.stringify(that.detailTypeList1));




                        var scp = [];
                        var kqlq = [];
                        var jylq = [];
                        var ktlq = [];
                        var hhs = [];
                        for (var i in res.ds) {
                            if (res.ds[i].Name == '刹车片') {
                                scp.push({
                                    CategoryId: res.ds[i].CategoryId,
                                    Name: '全部',
                                    Icon: ''
                                })
                                for (var j in res.ds) {
                                    if (res.ds[i].CategoryId == res.ds[j].ParentCategoryId) {
                                        scp.push(res.ds[j]);
                                    }
                                }
                            }
                            if (res.ds[i].Name == '空气滤清器') {
                                kqlq.push({
                                    CategoryId: res.ds[i].CategoryId,
                                    Name: '全部',
                                    Icon: ''
                                })
                                for (var j in res.ds) {
                                    if (res.ds[i].CategoryId == res.ds[j].ParentCategoryId) {
                                        kqlq.push(res.ds[j]);
                                    }
                                }
                            }
                            if (res.ds[i].Name == '机油滤清器') {
                                jylq.push({
                                    CategoryId: res.ds[i].CategoryId,
                                    Name: '全部',
                                    Icon: ''
                                })
                                for (var j in res.ds) {
                                    if (res.ds[i].CategoryId == res.ds[j].ParentCategoryId) {
                                        jylq.push(res.ds[j]);
                                    }
                                }
                            }
                            if (res.ds[i].Name == '空调滤清器') {
                                ktlq.push({
                                    CategoryId: res.ds[i].CategoryId,
                                    Name: '全部',
                                    Icon: ''
                                })
                                for (var j in res.ds) {
                                    if (res.ds[i].CategoryId == res.ds[j].ParentCategoryId) {
                                        ktlq.push(res.ds[j]);
                                    }
                                }
                            }
                            if (res.ds[i].Name == '火花塞') {
                                hhs.push({
                                    CategoryId: res.ds[i].CategoryId,
                                    Name: '全部',
                                    Icon: ''
                                })
                                for (var j in res.ds) {
                                    if (res.ds[i].CategoryId == res.ds[j].ParentCategoryId) {
                                        hhs.push(res.ds[j]);
                                    }
                                }
                            }

                        }

                        for (var i in that.detailTypeList2) {
                            if (that.detailTypeList2[i].TagName.indexOf('刹车片') > -1) {
                                that.detailTypeList2[i].typeNode = scp;
                            }
                            if (that.detailTypeList2[i].TagName.indexOf('空气滤清') > -1) {
                                that.detailTypeList2[i].typeNode = kqlq;
                            }
                            if (that.detailTypeList2[i].TagName.indexOf('机油滤清') > -1) {
                                that.detailTypeList2[i].typeNode = jylq;
                            }
                            if (that.detailTypeList2[i].TagName.indexOf('空调滤清') > -1) {
                                that.detailTypeList2[i].typeNode = ktlq;
                            }
                            if (that.detailTypeList2[i].TagName.indexOf('火花塞') > -1) {
                                that.detailTypeList2[i].typeNode = hhs;
                            }
                        }


                        that.detailTypeList = that.detailTypeList2;
                        that.chooseType = 2;

                    })
                },
                toggleChecked(item, row) {
                    var that = this;
                    if (typeof item.checked === 'undefined') {
                        that.$set(item, 'checked', true);
                        if (that.chooseType == 2) {
                            item.num = item.PackageNum || 1;
                        }

                        row.checkArray.push(item);
                    } else {
                        item.checked = !item.checked;
                        if (item.checked) {
                            if (that.chooseType == 2) {
                                item.num = item.PackageNum || 1;
                            }
                            row.checkArray.push(item);
                        } else {
                            row.checkArray = row.checkArray.filter(function (a) {
                                return a.ProductId != item.ProductId;
                            })
                        }

                    }
                },
                changeCheckNum(item, row) {
                    for (var i in row.checkArray) {
                        if (row.checkArray[i].ProductId == item.ProductId) {
                            row.checkArray[i].num = item.num;
                        }
                    }
                },
                getMeal() {
                    var that = this;
                    that.showLoading = true;
                    FLD.ajax('sp_getTcTags', {}, function (res) {
                        that.showLoading = false;
                        var detailTypeList2 = []
                        for (var i in res.ds) {
                            detailTypeList2.push({
                                listLoading: false,
                                listFinished: true,
                                pageIndex: 1,
                                pageSize: 999,
                                node: [],
                                TagID: res.ds[i].TagID,
                                TagName: res.ds[i].TagName,
                                keyName: '',
                                categoryId: 0,
                                brandId: 0,
                                loadingDisabled: false,
                                refreshLoading: false,
                                typeNode: [],
                                ifFinal: false,
                                selectTypeIndex: -1,
                                checkArray: []
                            })
                        }

                        that.detailTypeList2 = detailTypeList2;

                        that.getTypes();

                    })
                },
                getSearchList() {
                    var that = this;
                    that.activeKey = 0;
                    that.showLoading = true;
                    that.detailTypeList[0].isFinal = true;
                    that.detailTypeList[0].selectTypeIndex = -1;
                    var obj = {
                        keyName: that.keyName,
                        categoryId: 0,
                        brandId: 0,
                        tagId: 0,
                        pageIndex: 1,
                        pageSize: 9999
                    }
                    FLD.ajax('sp_searchProducts', obj, function (res) {
                        that.showLoading = false;
                        that.detailTypeList[0].refreshLoading = false;
                        that.detailTypeList[0].listFinished = false;
                        for (var i in res.ds) {
                            res.ds[i].num = 1;
                        }
                        that.detailTypeList[0].node = res.ds;
                        that.toggleNodeChecked(that.detailTypeList[0]);
                    })

                },
                clickAllTypeHandler(row) {
                    var that = this;
                    if (that.chooseType == 1) {
                        that.showLoading = true;
                        row.isFinal = true;
                        row.pageIndex = 1;
                        var obj = {
                            keyName: that.activeKey == 0 ? that.keyName : '',
                            categoryId: row.selectTypeIndex == -1 ? row.CategoryId : row.typeNode[row.selectTypeIndex].CategoryId,
                            brandId: row.brandId,
                            tagId: row.tagId,
                            pageIndex: row.pageIndex,
                            pageSize: row.pageSize
                        }
                        FLD.ajax('sp_searchProducts', obj, function (res) {
                            that.showLoading = false;
                            row.refreshLoading = false;
                            row.listFinished = false;
                            for (var i in res.ds) {
                                res.ds[i].num = 1;
                            }
                            row.node = res.ds;
                            that.toggleNodeChecked(row);
                        })
                    } else {
                        that.showLoading = true;
                        that.allChecked = false;
                        row.isFinal = true;
                        row.pageIndex = 1;
                        var obj = {
                            keyName: row.keyName,
                            categoryId: row.selectTypeIndex == -1 ? row.categoryId : row.typeNode[row.selectTypeIndex].CategoryId,
                            brandId: row.brandId,
                            tagId: row.TagID,
                            pageIndex: row.pageIndex,
                            pageSize: row.pageSize
                        }
                        FLD.ajax('sp_searchProducts', obj, function (res) {
                            that.showLoading = false;
                            row.refreshLoading = false;
                            row.listFinished = false;
                            for (var i in res.ds) {
                                res.ds[i].num = 1;
                            }
                            row.node = res.ds;
                            that.toggleNodeChecked(row);
                        })
                    }


                },
                returnBefore(row) {
                    var that = this;

                    row.node = [];
                    row.keyName = '';
                    row.pageIndex = 1;
                    row.selectTypeIndex = -1;
                    row.isFinal = false;
                    that.allChecked = false;
                },
                onRefresh1(row) {
                    var that = this;
                    row.refreshLoading = true;
                    if (row.typeNode.length) {
                        if (row.selectTypeIndex == -1) {
                            that.clickAllTypeHandler(row);
                        } else {
                            that.clickTypeHandler1(row, row.typeNode[row.selectTypeIndex], row.selectTypeIndex);
                        }

                    } else {
                        row.listFinished = true;
                        that.toggleItem1(row);
                    }

                },
                onRefresh2(row) {
                    var that = this;
                    row.refreshLoading = true;
                    if (row.selectTypeIndex == -1) {
                        that.clickAllTypeHandler(row)
                    } else {
                        that.clickTypeHandler2(row, row.typeNode[row.selectTypeIndex], row.selectTypeIndex);
                    }

                },
                clickTypeHandler1(row, typeItem, typeIndex) {
                    var that = this;
                    that.showLoading = true;
                    row.isFinal = true;
                    row.selectTypeIndex = typeIndex;
                    row.pageIndex = 1;
                    var obj = {
                        keyName: '',
                        categoryId: typeItem.CategoryId,
                        brandId: row.brandId,
                        tagId: row.tagId,
                        pageIndex: row.pageIndex,
                        pageSize: row.pageSize
                    }
                    FLD.ajax('sp_searchProducts', obj, function (res) {
                        that.showLoading = false;
                        row.refreshLoading = false;
                        row.listFinished = false;
                        for (var i in res.ds) {
                            res.ds[i].num = 1;
                        }
                        row.node = res.ds;
                        that.toggleNodeChecked(row);
                    })

                },
                clickTypeHandler2(row, typeItem, typeIndex) {
                    var that = this;
                    that.showLoading = true;
                    row.isFinal = true;
                    row.selectTypeIndex = typeIndex;
                    row.pageIndex = 1;
                    var obj = {
                        keyName: row.keyName,
                        categoryId: typeItem.CategoryId,
                        brandId: row.brandId,
                        tagId: row.TagID,
                        pageIndex: row.pageIndex,
                        pageSize: row.pageSize
                    }
                    FLD.ajax('sp_searchProducts', obj, function (res) {
                        that.showLoading = false;
                        row.refreshLoading = false;
                        row.listFinished = false;
                        for (var i in res.ds) {
                            res.ds[i].num = 1;
                        }
                        row.node = res.ds;
                        that.toggleNodeChecked(row);
                    })

                },
                toggleItem1(row) {
                    var that = this;

                    if (!row.typeNode.length && !row.node.length || row.refreshLoading) {
                        that.showLoading = true;

                        row.isFinal = true;
                        row.pageIndex = 1;
                        var obj = {
                            keyName: '',
                            categoryId: row.CategoryId,
                            brandId: row.brandId,
                            tagId: row.tagId,
                            pageIndex: row.pageIndex,
                            pageSize: row.pageSize
                        }
                        FLD.ajax('sp_searchProducts', obj, function (res) {
                            that.showLoading = false;
                            row.refreshLoading = false;
                            row.listFinished = false;
                            for (var i in res.ds) {
                                res.ds[i].num = 1;
                            }
                            row.node = res.ds;
                        })
                    }

                },
                toggleItem2(row) {
                    var that = this;
                    that.allChecked = false;

                },
                getTagArray(item) {
                    var that = this;
                    if (!item.TagNames) {
                        return [];
                    } else {
                        return item.TagNames.split(',');
                    }
                },
                getTotalPrice() {
                    var that = this;
                    var m = 0;
                    for (var x in that.detailTypeList) {
                        for (var i in that.detailTypeList[x].checkArray) {
                            m += that.detailTypeList[x].checkArray[i].SalePrice * that.detailTypeList[x].checkArray[i].num;
                        }
                    }

                    return m * 100;
                },
                getTotalPrice_popup() {
                    var that = this;
                    var m = 0;
                    for (var x in that.detailTypeList) {
                        for (var i in that.detailTypeList[x].checkArray) {
                            // if (that.detailTypeList[that.activeKey].node[i].checked) {
                            m += that.detailTypeList[x].checkArray[i].SalePrice * that.detailTypeList[x].checkArray[i].num;
                            // }
                        }
                    }

                    // if (that.detailTypeList[that.activeKey]) {
                    //     for (var i in that.detailTypeList[that.activeKey].checkArray) {
                    //         // if (that.detailTypeList[that.activeKey].node[i].checked) {
                    //             m += that.detailTypeList[that.activeKey].checkArray[i].SalePrice * that.detailTypeList[that.activeKey].checkArray[i].num;
                    //         // }
                    //     }
                    // }

                    return m.toFixed(2);
                },
                changeAll(v) {
                    var that = this;
                    if (that.detailTypeList[that.activeKey].isFinal) {
                        if (v) {
                            if (that.chooseType == 1) {
                                for (var i in that.detailTypeList[that.activeKey].node) {
                                    if (that.detailTypeList[that.activeKey].node[i].Stock > 0) {
                                        that.$set(that.detailTypeList[that.activeKey].node[i], 'checked', true);
                                    } else {
                                        that.$set(that.detailTypeList[that.activeKey].node[i], 'checked', false);
                                    }

                                }
                                that.detailTypeList[that.activeKey].checkArray = JSON.parse(JSON.stringify(that.detailTypeList[that.activeKey].node)).filter(function (x) {
                                    return x.checked;
                                });
                            } else {
                                for (var i in that.detailTypeList[that.activeKey].node) {
                                    if (that.detailTypeList[that.activeKey].node[i].Stock > 0) {
                                        that.$set(that.detailTypeList[that.activeKey].node[i], 'checked', true);
                                    } else {
                                        that.$set(that.detailTypeList[that.activeKey].node[i], 'checked', false);
                                    }
                                    that.detailTypeList[that.activeKey].node[i].num = that.detailTypeList[that.activeKey].node[i].PackageNum || 1;

                                }
                                that.detailTypeList[that.activeKey].checkArray = JSON.parse(JSON.stringify(that.detailTypeList[that.activeKey].node)).filter(function (x) {
                                    return x.checked;
                                });
                            }


                        } else {
                            for (var i in that.detailTypeList[that.activeKey].node) {
                                that.$set(that.detailTypeList[that.activeKey].node[i], 'checked', false);
                            }
                            that.detailTypeList[that.activeKey].checkArray = [];
                        }
                    }

                },
                setMealNum() {
                    var that = this;
                    that.allChecked = true;
                    for (var i in that.detailTypeList[that.activeKey].node) {
                        that.detailTypeList[that.activeKey].node[i].num = parseInt(that.mealNum);
                        that.$set(that.detailTypeList[that.activeKey].node[i], 'checked', true);
                    }
                    that.detailTypeList[that.activeKey].checkArray = JSON.parse(JSON.stringify(that.detailTypeList[that.activeKey].node));
                    setTimeout(function () {
                        that.isMeal = false;
                    }, 200)
                },
                closeMeal() {
                    var that = this;
                    setTimeout(function () {
                        that.isMeal = false;
                    }, 200)
                },
                addCart() {
                    var that = this;
                    that.showCheckedArray = false;

                    var productIds = [];
                    var skuIds = [];
                    var quantitys = [];
                    for (var x in that.detailTypeList) {
                        for (var i in that.detailTypeList[x].checkArray) {
                            productIds.push(that.detailTypeList[x].checkArray[i].ProductId)
                            skuIds.push(that.detailTypeList[x].checkArray[i].SkuId)
                            quantitys.push(that.detailTypeList[x].checkArray[i].num)

                        }
                    }
                    var obj = {
                        h_userId: h_userId,
                        productId: productIds.join(),
                        skuId: skuIds.join(),
                        quantity: quantitys.join()
                    }
                    FLD.nativeRequest_shop('batchAddShoppingCar', obj, function (res) {

                        for (var x in that.detailTypeList) {
                            that.detailTypeList[x].checkArray = [];
                            for (var i in that.detailTypeList[x].node) {
                                that.$set(that.detailTypeList[x].node[i], 'checked', false);
                            }
                        }
                        that.allChecked = false;

                        layer.open({
                            content: '购物车添加成功!',
                            skin: 'msg',
                            time: 2
                        });
                    })

                },

                onSubmit() {
                    var that = this;

                    that.showCheckedArray = true;

                },
                keybackEvent() {
                    var that = this;
                    if (that.detailTypeList[that.activeKey].typeNode.length && that.detailTypeList[that.activeKey].isFinal) {
                        that.returnBefore(that.detailTypeList[that.activeKey]);
                    }
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })


    };


</script>

</html>